<!--
 * hi-checkbox - 复选框组件
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 基础使用 -->
        <module-demo title="基础使用" tips="此处演示的都是单独使用时的用法，组合用法请查看 hi-checkbox-group 文档">
            <view class="cbxes">
                <hi-checkbox v-model="isChecked1" alone label="默认样式"></hi-checkbox>
                <hi-checkbox v-model="isChecked2" alone label="默认边框" border></hi-checkbox>
            </view>
        </module-demo>

        <!-- 主题 -->
        <module-demo title="主题">
            <view class="cbxes">
                <hi-checkbox v-model="isChecked3" alone label="主题" theme="primary"></hi-checkbox>
                <hi-checkbox v-model="isChecked4" alone label="主题" theme="success"></hi-checkbox>
                <hi-checkbox v-model="isChecked5" alone label="主题" theme="warning"></hi-checkbox>
                <hi-checkbox v-model="isChecked6" alone label="主题" theme="error"></hi-checkbox>
                <hi-checkbox v-model="isChecked7" alone label="主题" theme="info"></hi-checkbox>
            </view>
        </module-demo>

        <!-- 镂空 -->
        <module-demo title="镂空">
            <view class="cbxes">
                <hi-checkbox v-model="isChecked8" alone label="镂空" plain></hi-checkbox>
                <hi-checkbox v-model="isChecked9" alone label="镂空" plain theme="primary"></hi-checkbox>
                <hi-checkbox v-model="isChecked10" alone label="镂空" plain theme="success"></hi-checkbox>
                <hi-checkbox v-model="isChecked11" alone label="镂空" plain theme="warning"></hi-checkbox>
                <hi-checkbox v-model="isChecked12" alone label="镂空" plain theme="error"></hi-checkbox>
                <hi-checkbox v-model="isChecked13" alone label="镂空" plain theme="info"></hi-checkbox>
            </view>
        </module-demo>

        <!-- 浅化 -->
        <module-demo title="浅化">
            <view class="cbxes">
                <hi-checkbox v-model="isChecked15" alone label="浅化" tint theme="primary"></hi-checkbox>
                <hi-checkbox v-model="isChecked16" alone label="浅化" tint theme="success"></hi-checkbox>
                <hi-checkbox v-model="isChecked17" alone label="浅化" tint theme="warning"></hi-checkbox>
                <hi-checkbox v-model="isChecked18" alone label="浅化" tint theme="error"></hi-checkbox>
                <hi-checkbox v-model="isChecked19" alone label="浅化" tint theme="info"></hi-checkbox>
            </view>
        </module-demo>

        <!-- 边框 + 主题 + 浅化 -->
        <module-demo title="边框+主题+浅化">
            <view class="cbxes">
                <hi-checkbox v-model="isChecked20" alone label="边框+主题+浅化" border tint theme="primary"></hi-checkbox>
                <hi-checkbox v-model="isChecked21" alone label="边框+主题+浅化" border tint theme="success"></hi-checkbox>
                <hi-checkbox v-model="isChecked22" alone label="边框+主题+浅化" border tint theme="warning"></hi-checkbox>
                <hi-checkbox v-model="isChecked23" alone label="边框+主题+浅化" border tint theme="error"></hi-checkbox>
                <hi-checkbox v-model="isChecked24" alone label="边框+主题+浅化" border tint theme="info"></hi-checkbox>
            </view>
        </module-demo>

        <!-- 圆形复选框 -->
        <module-demo title="圆形复选框">
            <view class="cbxes">
                <hi-checkbox v-model="isChecked1" alone label="圆形复选框" circle theme="primary"></hi-checkbox>
                <hi-checkbox v-model="isChecked2" alone label="圆形复选框" circle theme="success"></hi-checkbox>
                <hi-checkbox v-model="isChecked3" alone label="圆形复选框" circle theme="warning"></hi-checkbox>
                <hi-checkbox v-model="isChecked4" alone label="圆形复选框" circle theme="error"></hi-checkbox>
                <hi-checkbox v-model="isChecked5" alone label="圆形复选框" circle theme="info"></hi-checkbox>
            </view>
        </module-demo>

        <!-- 禁用状态 -->
        <module-demo title="禁用状态">
            <view class="cbxes">
                <hi-checkbox v-model="isChecked14" alone label="禁用状态" disabled></hi-checkbox>
                <hi-checkbox v-model="isChecked25" alone label="禁用状态" disabled theme="primary"></hi-checkbox>
                <hi-checkbox v-model="isChecked26" alone label="禁用状态" disabled theme="success"></hi-checkbox>
                <hi-checkbox v-model="isChecked27" alone label="禁用状态" disabled theme="warning"></hi-checkbox>
                <hi-checkbox v-model="isChecked28" alone label="禁用状态" disabled theme="error"></hi-checkbox>
                <hi-checkbox v-model="isChecked29" alone label="禁用状态" disabled theme="info"></hi-checkbox>
            </view>
        </module-demo>

        <!-- 异步变更 -->
        <module-demo title="异步变更">
            <hi-checkbox v-model="isChecked30" alone async @asyncChange="onAsyncChange" label="异步变更" theme="primary" tint border></hi-checkbox>
        </module-demo>

        <!-- 自定义边框颜色 -->
        <module-demo title="自定义边框颜色">
            <hi-checkbox v-model="isChecked31" alone label="自定义边框颜色" border inactiveBorderColor="#9900ff" activeBorderColor="#ff0000"></hi-checkbox>
        </module-demo>

        <!-- 自定义状态色 -->
        <module-demo title="自定义状态色">
            <hi-checkbox v-model="isChecked32" alone label="自定义状态色" inactiveColor="#ff0000" activeColor="#9900ff"></hi-checkbox>
        </module-demo>

        <!-- 自定义文字颜色 -->
        <module-demo title="自定义文字颜色">
            <hi-checkbox
                v-model="isChecked33"
                alone
                label="自定义文字颜色"
                labelColor="#ff0000"
                activeLabelColor="#9900ff"
                theme="success"
                border
                tint
            ></hi-checkbox>
        </module-demo>

        <!-- 自定义图标颜色 -->
        <module-demo title="自定义图标颜色">
            <hi-checkbox v-model="isChecked34" alone label="自定义图标颜色" iconColor="#ff0000" theme="warning" border tint></hi-checkbox>
        </module-demo>

        <!-- 自定义框框大小 -->
        <module-demo title="自定义框框大小">
            <hi-checkbox v-model="isChecked34" alone label="自定义框框大小" size="26px" theme="error" border tint></hi-checkbox>
        </module-demo>

        <!-- 自定义图标大小 -->
        <module-demo title="自定义图标大小">
            <hi-checkbox v-model="isChecked35" alone label="自定义图标大小" iconSize="20px" theme="error" border tint></hi-checkbox>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 单独使用
    const isChecked1 = ref(true);
    const isChecked2 = ref(true);
    const isChecked3 = ref(true);
    const isChecked4 = ref(true);
    const isChecked5 = ref(true);
    const isChecked6 = ref(true);
    const isChecked7 = ref(true);
    const isChecked8 = ref(true);
    const isChecked9 = ref(true);
    const isChecked10 = ref(true);
    const isChecked11 = ref(true);
    const isChecked12 = ref(true);
    const isChecked13 = ref(true);
    const isChecked14 = ref(true);
    const isChecked15 = ref(true);
    const isChecked16 = ref(true);
    const isChecked17 = ref(true);
    const isChecked18 = ref(true);
    const isChecked19 = ref(true);
    const isChecked20 = ref(true);
    const isChecked21 = ref(true);
    const isChecked22 = ref(true);
    const isChecked23 = ref(true);
    const isChecked24 = ref(true);
    const isChecked25 = ref(true);
    const isChecked26 = ref(true);
    const isChecked27 = ref(true);
    const isChecked28 = ref(true);
    const isChecked29 = ref(true);
    const isChecked30 = ref(true);
    const isChecked31 = ref(true);
    const isChecked32 = ref(true);
    const isChecked33 = ref(true);
    const isChecked34 = ref(true);
    const isChecked35 = ref(true);

    /**
     * 异步变更事件
     * @param {Boolean} checked 当前选中状态
     */
    function onAsyncChange(checked) {
        uni.showModal({
            title: "提示",
            content: `点击了复选框，当前选中状态为${checked ? "选中" : "未选中"}`,
            showCancel: true,
            confirmText: "切换状态",
            cancelText: "保持不变",
            success: ({ confirm, cancel }) => {
                if (confirm) {
                    isChecked30.value = !isChecked30.value;
                }
            }
        });
    }
</script>

<style lang="scss" scoped>
    .cbxes {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
</style>
